<template>
	<view class="authCode">
		<view class="authCode-plate-1">
			<text>已绑定手机号</text>
			<text>{{mobile}}</text>
		</view>
		<view class="authCode-plate-2" v-if="itemShow == 0">
			<input type="text" v-model="code" placeholder="请输入验证码" />
			<button class="border-btn" v-if="btnShow == 1">{{timeVal}}S</button>
			<button class="border-btn" v-else @click="onPhoneCode">重新发送</button>
		</view>
		<view class="authCode-plate-3">
			<button class="bg-btn" @click="onItemShow" v-if="itemShow == 0">下一步</button>
		</view>
		<view class="authCode-plate-4" v-if="itemShow == 1">
			<view class="item">
				<input type="text" v-model="newMobile" placeholder="请输入新的手机号" />
				<button class="border-btn" @click="getNewCode">获取验证码</button>
			</view>
			<view class="item">
				<input type="text" v-model="newCode" placeholder="请输入验证码" />
				<button class="bg-btn" @click="onBind">更换绑定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				btnShow: 1,
				timeVal: 60,
				newMobile: '',
				itemShow: 0,
				code: '',
				newCode: '',
				phoneCode: ''
			}
		},
		onLoad(option) {
			this.mobile = option.mobile
		},
		created() {
			this.onSetInterval()
		},
		mounted() {
			this.onPhoneCode()
		},
		methods: {
			//计时器
			onSetInterval() {
				let timeInterval = setInterval(() => {
					this.timeVal--
					let val = this.timeVal
					if (val == 0) {
						clearInterval(timeInterval)
						this.btnShow = 2
					}
				}, 1000)
			},
			//请求验证码
			onPhoneCode() {
				uni.request({
					url: this.$Url + '/index.php/app/utils/send_validate_code_backup',
					method: 'POST',
					data: {
						type: 2,
						mobile: this.mobile
					},
					success: (res) => {
						if (res.data.status == 201) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
						if (res.data.status == 200) {
							uni.showToast({
								icon: 'none',
								title: '验证码发送成功，在手机接收验证码'
							})
							this.phoneCode = res.data.data
						}
					}
				})
			},
			//获取新的验证码
			getNewCode(){
				uni.request({
					url: this.$Url + '/index.php/app/utils/send_validate_code_backup',
					method: 'POST',
					data: {
						type: 2,
						mobile: this.newMobile
					},
					success: (res) => {
						if (res.data.status == 201) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
						if (res.data.status == 200) {
							uni.showToast({
								icon: 'none',
								title: '验证码发送成功，在手机接收验证码'
							})
							this.phoneCode = res.data.data
						}
					}
				})
			},
			//绑定手机号
			onBind(){
				let newMobile = this.newMobile
				let newCode = this.newCode
				let phoneCode = this.phoneCode
				var re = /^1\d{10}$/;
				if (!re.test(newMobile)) {
					uni.showToast({
						title: '手机号码格式错误，请输入正确的手机号码',
						icon: 'none'
					})
				} else {
					uni.request({
					    url:this.$Url +'/index.php/app/Users/bindingMobile',
					    method:'POST',
					    data:{
					       mobile:this.newMobile,
						   code:this.newCode,
						   oauth:'weixin'
					    },
					    header:{
					        "token":uni.getStorageSync('token')
					    },
					    success: (res) => {
					       if(res.data.status == 200){
							   uni.showToast({
							   	title:res.data.msg
							   })
							   uni.setStorageSync('token',res.data.data.token)
						   }else{
							   uni.showToast({
							   	title:res.data.msg,
								icon:'none'
							   })
						   }
					    }
					})
				}
			},
			//下一步操作
			onItemShow() {
				let codeNum = this.code
				if (codeNum == this.phoneCode) {
					this.itemShow = 1
				} else {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					})
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.authCode {
		width: 100vw;
		min-height: 100vh;
		background-color: #fff;

		.authCode-plate-1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			text:first-child {
				font-size: 30upx;
				color: #333;
				margin-top: 100upx;
				margin-bottom: 40upx;
			}

			text:last-child {
				font-size: 32upx;
				font-weight: 600;
				color: #333;
			}
		}

		.authCode-plate-2 {
			display: flex;
			align-items: center;
			margin: 190upx auto;
			justify-content: center;

			input {
				width: 340upx;
				height: 72upx;
				border-bottom: 1px solid #eee;
				font-size: 36upx;
				text-align: center;
				color: #333;
				margin-left: 60upx;
			}

			.border-btn {
				width: 208upx;
				height: 72upx;
				font-size: 26upx;
			}
		}

		.authCode-plate-3 {
			.bg-btn {
				width: 350upx;
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 60upx;
			}
		}

		.authCode-plate-4 {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.item {
				display: flex;
				align-items: center;
				margin: 40upx auto;
				justify-content: center;

				input {
					width: 340upx;
					height: 72upx;
					border-bottom: 1px solid #eee;
					font-size: 36upx;
					text-align: center;
					color: #333;
					margin-left: 60upx;
				}

				button {
					width: 208upx;
					height: 72upx;
					font-size: 26upx;
				}
			}
		}
	}
</style>
